<!DOCTYPE html>
<html>
<head>
    <title> ImageRotation </title>
    <meta charset="utf-8"/>
    <style type="text/css">
        #demo { cursor:pointer; position:absolute;filter:progid:DXImageTransform.Microsoft.Matrix(sizingmethod="auto expand");}
    </style>
</head>
<body>
<div id="container" style="width:500px;height:350px;position:relative;margin:0 auto">
    <div id="demo">
        <img src="http://icons.iconarchive.com/icons/google/chrome/256/Google-Chrome-icon.png" />
    </div>
</div>
<script>
    var Img = function() {
        var g = function(id) { return document.getElementById(id); },
                isIE = !!window.ActiveXObject,
                el=document.createElement("div"),
                rotateAtt=(isIE || el.style.transform==="")?"transform"://
                        el.style.WebkitTransform===""?"WebkitTransform"://webkit for chrome and safari
                                el.style.MozTransform===""?"MozTransform":"OTransform",//mozilla : opera
                i = 0, sinDeg = 0, cosDeg = 0, timer = null ,
                rotate = function(target, degree) {
                    target = g(target);
                    clearInterval(timer);
                    var orginW = target.clientWidth, orginH = target.clientHeight,
                            run=function(angle) {
                                if (isIE) { // IE
                                    cosDeg = Math.cos(angle * Math.PI / 180);
                                    sinDeg = Math.sin(angle * Math.PI / 180);
                                    with(target.filters.item(0)) {
                                        M11 = M22 = cosDeg; M12 = -(M21 = sinDeg);
                                    }
                                    target.style.top = (orginH - target.offsetHeight) / 2 + 'px';
                                    target.style.left = (orginW - target.offsetWidth) / 2 + 'px';
                                } else {
                                    target.style[rotateAtt]= "rotate(" + angle + "deg)";
                                }
                            };
                    timer = setInterval(function() {
                        i += 10;
                        run(i);
                        if (i > degree - 1) {
                            i = 0;
                            clearInterval(timer);
                        }
                    }, 10);
                }
        return {rotate: rotate}
    }();
    window.onload = function() {
        Img.rotate('demo', 360);
        document.getElementById('demo').onclick = function() {
            Img.rotate('demo', 720);
        }
    }
</script>
</body>
</html>